import QtQuick 2.2

Rectangle {
    id: vk

    property string rotateLeft: "\u2939"
    property string rotateRight: "\u2935"
    property string leftArrow: "\u2190"
    property string upperArrow: "\u2191"
    property string division : "\u00f7"
    property string multiplication : "\u00d7"
    property string squareRoot : "\u221a"
    property string plusminus : "\u00b1"

    signal buttonPressed(string op)

    // span the parent's width
    anchors {
        left: parent.left
        right: parent.right
    }

    // A virtual keyboard (VK) is attached the the bottom of an Item
    // and slides up when activated.
    // this item is called the surface
    property Item surface: parent

    // By default the VK's height is at the bottom of the surface
    y: surface.height

    // Depending on the parent's focus, set the initial state
    state: parent.activeFocus ? "active" : "inactive"

    Column {
        id: vkc;

        anchors {
            horizontalCenter: parent.horizontalCenter
            margins: 4
        }

        spacing: 4

        Row {
            spacing: 4
            anchors.horizontalCenter: parent.horizontalCenter
           Buttontmp {text: "1S" ;op: "1S";Component.onCompleted: clicked.connect(buttonPressed)}
           Buttontmp { text: "2S" ;op: "2S";Component.onCompleted: clicked.connect(buttonPressed)}
           Buttontmp {text: "3S" ;op: "3S";Component.onCompleted: clicked.connect(buttonPressed)}
           Buttontmp { text: "4S" ;op: "4S";Component.onCompleted: clicked.connect(buttonPressed)}
           Buttontmp {text: "5S" ;op: "5S";Component.onCompleted: clicked.connect(buttonPressed)}

        }
    }

    states: [
        State {
            name: "active"
            PropertyChanges { target: vk; y: (3*surface.height/4 - vkc.height/2+50); }
        },
        State {
            name: "inactive"
            PropertyChanges { target: vk; y: 2*surface.height ; }
        }
    ]

    transitions: Transition {
        NumberAnimation {
            target: vk
            property: "y"
            easing.type: "OutQuad"
            duration: 250
        }
    }
}
